<template>
  <div class="con">
    <div class="contbox6_10">
      <p
        class="titlelist6_10 titles"
        style="box-shadow: none; position: fixed; z-index: 5"
      >
        权益管理
        <span style="color: #999; font-size: 16px"
          >&nbsp;&nbsp;
          <span style="font-size: 16px; color: #2f2c29">/</span>
          &nbsp;&nbsp; </span
        >权益列表&nbsp;&nbsp;
        <span style="font-size: 16px; color: #2f2c29">/</span>
        <span v-show="status == '001'" style="font-size: 16px">创建权益</span>
        <span v-show="status == '002'" style="font-size: 16px">修改权益</span>
        <span v-show="status == '003'" style="font-size: 16px">查看权益</span>
      </p>
      <div
        class="content"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.9)"
      >
        <div class="wrapBox">
          <div class="info">
            <div class="infoTitle">基本信息</div>
            <div class="infoCont">
              <div class="infoList">
                <div class="infoListTitle">业务类型</div>
                <el-select
                  v-model="busUid"
                  placeholder="请选择"
                  @change="busUidChange"
                  :disabled="type || status == '002'"
                >
                  <el-option
                    v-for="item in businessOptions"
                    :key="item.uid"
                    :label="item.busName"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="infoList">
                <div class="infoListTitle">业务品牌</div>
                <el-select
                  v-model="channelUid"
                  :disabled="type || status == '002'"
                  @change="brandChange"
                  placeholder="请选择业务品牌"
                >
                  <el-option
                    v-for="item in brandOptions"
                    :key="item.uid"
                    :label="item.channelName"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="infoList">
                <div class="infoListTitle">计算方式</div>
                <el-select v-model="calcType" disabled placeholder="请选择">
                  <el-option
                    v-for="item in jisuanOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="infoTitle">配置权益</div>
          <div class="headTitle">
            <div style="width: 80px">等级</div>
            <div style="width: 150px">等级名称</div>
            <div style="width: 150px">权益开通金额 <span>(元)</span></div>
            <div style="width: 160px">上级推荐奖励<span>(元)</span></div>
            <div style="width: 550px" class="fenrun">
              <div style="padding-left: 20px">分润规则</div>
              <div style="width: 40px" v-if="poliOptions.length > 0"></div>
              <div style="margin-left: 220px">
                分润奖励
                <span v-show="calcType == '2'">(元)</span
                ><span v-show="calcType != '2'">(%)</span>
              </div>
            </div>
            <div style="width: 480px">升级规则</div>
            <div style="width: 100px">操作</div>
          </div>
          <div v-for="(item, index) in data" :key="index" class="big1" style="">
            <div
              class="backgroundBlock"
              :class="index % 2 == 0 ? 'single' : 'double'"
              style="display: flex"
            >
              <div style="width: 80px" class="flex">V{{ index + 1 }}</div>
              <div style="width: 150px" class="flex">
                <el-input
                  :disabled="type"
                  v-model="item.name"
                  placeholder="等级名称"
                ></el-input>
              </div>
              <div style="width: 150px" class="flex">
                <el-input
                  class="money"
                  :disabled="type"
                  v-model="item.openAmt"
                  @input="
                    (value) => {
                      item.openAmt = value.replace(
                        /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                        '$1'
                      );
                    }
                  "
                  placeholder="开通金额"
                ></el-input>
              </div>
              <div style="width: 150px" class="flex">
                <el-input
                  :disabled="type"
                  v-model="item.buyRgtProf"
                  class="money"
                  @input="
                    (value) => {
                      item.buyRgtProf = value.replace(
                        /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                        '$1'
                      );
                    }
                  "
                  placeholder="推荐金额"
                ></el-input>
              </div>
            </div>

            <div style="width: 540px; margin-right: 10px">
              <div
                v-for="(item1, index1) in item.rgtOfficeCostCfgListMapList"
                :key="index1"
                class="lastBox"
              >
                <div
                  v-for="(item2, index2) in item1.list"
                  :key="index2"
                  style="display: flex; margin-bottom: 10px; padding: 0 20px"
                  :class="index % 2 == 0 ? 'single' : 'double'"
                >
                  <div
                    class="backgroundBlock"
                    :class="index % 2 == 0 ? 'single' : 'double'"
                  >
                    <div
                      v-for="(item3, index3) in item2.rgtOfficeRuleCostList"
                      :key="index3"
                      class="borBot"
                      style="display: flex"
                    >
                      <div style="width: 130px" class="flex">
                        <el-select
                          disabled
                          v-model="item3.ruleName"
                          placeholder="请选择"
                          @blur="blur1"
                          @change="
                            change1(
                              item3.ruleUid,
                              index,
                              index1,
                              index2,
                              index3
                            )
                          "
                        >
                          <el-option
                            v-for="item in poliOptions"
                            :key="item.uid"
                            :label="item.ruleName"
                            :value="item.uid"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <!-- {{item3.options}} -->
                        <!-- 根据前一个选择的不同，来展示不同的值 -->
                        <el-select
                          disabled
                          v-model="item3.cfgValueName"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="bb in item3.options"
                            :key="bb.cfgValue"
                            :label="bb.cfgName"
                            :value="bb.cfgValue"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <!-- <div
                        class="addPic"
                        @click="addFen(index, index1, index2, index3)"
                        v-if="index3 == 0"
                        v-show="
                          type != true &&
                          item2.rgtOfficeRuleCostList.length <
                            poliOptions.length
                        "
                      >
                        +
                      </div>
                      <div
                        style="margin-left: 7px; border: 0"
                        class="cur addPic"
                        @click="delFen(index, index1, index2, index3)"
                        v-else
                      >
                        <img
                          src="../assets/images/delRules.png"
                          style="width: 13px; height: 13px"
                          alt=""
                          v-show="type != true"
                        />
                      </div> -->
                    </div>
                  </div>
                  <div style="margin-left: 50px" class="flex moneyBox">
                    <el-input
                      :disabled="type"
                      v-model="item2.costValue"
                      @change="runChange(index, index1, index2)"
                      @input="
                        (value) => {
                          item2.costValue = value.replace(
                            /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                            '$1'
                          );
                        }
                      "
                      placeholder="分润金额"
                    ></el-input>
                    <!-- <el-button
                      type="text"
                      @click="addFen1(index, index1, index2)"
                      v-if="index2 == 0"
                      v-show="type != true"
                    >
                      &nbsp;&nbsp;+&nbsp;&nbsp;添加分润规则
                    </el-button> -->
                    <!-- <div
                      @click="delFen1(index, index1, index2)"
                      style="margin-left: 10px"
                      class="cur"
                      v-show="type!=true"
                      v-else
                    >
                      <img src="../assets/images/delRules.png" alt="" />
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 升级规则 -->
            <div
              class="rgtOfficeRuleLevelList"
              :class="index % 2 == 0 ? 'single' : 'double'"
            >
              <div class="shengjiTop">
                <div
                  v-for="(val, num) in item.rgtOfficeRuleLevelList"
                  :key="num"
                  style="margin-bottom: 10px"
                >
                  <div style="display: flex">
                    <div
                      style="width: 140px; display: flex; align-items: center"
                    >
                      <el-select
                        :disabled="type"
                        v-model="val.ruleUid"
                        placeholder="请选择"
                        @change="bian(val.ruleCode, index, num)"
                      >
                        <el-option
                          v-for="aa in upgradeOptions"
                          :key="aa.uid"
                          :label="aa.ruleName"
                          :value="aa.uid"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div
                      style="width: 280px; display: flex; align-items: center"
                    >
                      <div class="one" v-if="val.isCfg == '0'">
                        <el-input
                          class="money"
                          :disabled="type"
                          v-model="val.cfgValues[0]"
                          @input="
                            (value) => {
                              val.cfgValues[0] = value.replace(
                                /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                                '$1'
                              );
                            }
                          "
                          placeholder="请输入"
                        ></el-input>
                      </div>
                      <div class="two" style="display: flex" v-else>
                        <el-input
                          class="money"
                          :disabled="type"
                          v-model="val.cfgValues[0]"
                          @input="
                            (value) => {
                              val.cfgValues[0] = value.replace(
                                /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                                '$1'
                              );
                            }
                          "
                          placeholder="起始数量"
                        ></el-input>
                        <div style="width: 10px"></div>
                        <el-input
                          class="money"
                          :disabled="type"
                          v-model="val.cfgValues[1]"
                          @input="
                            (value) => {
                              val.cfgValues[1] = value.replace(
                                /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                                '$1'
                              );
                            }
                          "
                          placeholder="结束数量"
                        ></el-input>
                      </div>
                      <div
                        class="addPic"
                        @click="addShengji(index, num)"
                        v-if="num == 0 && upgradeOptions.length > num + 1"
                        v-show="type != true"
                      >
                        +
                      </div>
                      <div
                        @click="delShengji(index, num)"
                        style="margin-left: 10px"
                        class="cur"
                        v-show="type != true && upgradeOptions.length > num + 1"
                        v-else
                      >
                        <img src="../assets/images/delRules.png" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              @click="addQuanyi"
              v-if="index == 0"
              v-show="type != true"
              :class="index % 2 == 0 ? 'single' : 'double'"
              style="
                background: #f9fafc;
                width: 240px;
                color: #409eff;
                cursor: pointer;
                margin-left: 10px;
                padding-left: 10px;
              "
              class="flex"
            >
              &nbsp;&nbsp; + &nbsp;&nbsp;添加权益等级
            </div>
            <div
              @click="delQuanyi(index)"
              class="flex cur"
              v-show="type != true"
              v-if="index == data.length - 1 && index != 0"
              :class="index % 2 == 0 ? 'single' : 'double'"
              style="
                background: #f9fafc;
                width: 200px;
                margin-left: 10px;
                padding-left: 10px;
              "
            >
              <img src="../assets/images/delRules.png" alt="" />
            </div>
          </div>
        </div>
        <div class="btnGroup">
          <el-button @click="backVipList">返回</el-button>
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import https from "../plugins/https";
export default {
  data() {
    return {
      lists: "",
      status: "",
      loading: true,
      // 计算方式
      calcType: "",
      // 升级规则
      upgradeOptions: "",
      channelUid: "", //品牌名称
      // 所有品牌
      brandOptions: [],
      // 计算方式
      jisuanOptions: [],
      //  分润规则
      poliOptions: "",
      // 所有的业务类型
      businessOptions: [],
      // 选中的业务类型
      busUid: "",
      list: "",
      submitBool: false, //判断所有值都不为空就改变状态
      type: false, //判断是查看还是修改
      num: 1, //显示会员等级
      allData: "",
      allList: "",
      list2: "",
      data: [
        {
          level: 1,
          name: "", //等级名称
          openAmt: "", //开通金额
          buyRgtProf: "", //推荐奖励
          // 分润规则
          rgtOfficeCostCfgListMapList: [
            // 规则 和规则值  和奖励金额
            {
              list: [
                {
                  costValue: "", //分润规则后面的数字
                  rgtOfficeRuleCostList: [
                    {
                      ruleUid: "",
                      ruleCode: "", //卡等级
                      cfgValue: "",
                      cfgValueId: "",
                      options: [],
                    },
                  ],
                },
              ],
            },
          ],
          //   升级规则
          rgtOfficeRuleLevelList: [
            {
              ruleCode: "",
              cfgValue: "",
              ruleUid: "",
              cfgValues: [],
              one: "",
              two: "",
              isCfg: "", //控制一个框还是两个框
            },
          ],
        },
      ],
    };
  },
  created() {
    this.status = this.$route.query.status;
    if (this.status == "001") {
      this.loading = false;
    }
    // 判断是不是点修改进来的
    // if(this.status!="001"){
    // alert("不是创建")

    // }

    this.getType();
    // this.getJisuan();
    // 记得加判断是回显的时候
    //  && !this.$route.query.backOf
    if (this.$route.query.callback) {
      this.getAllData().then((res) => {
        this.getJisuan();
        this.getType();
        this.busUid = this.allData.busUid;
        this.channelUid = this.allData.channelUid;
        this.calcType = this.allData.calcType;
        this.disPlays().then((res) => {
          console.log("不是回显的值");
          let lists = JSON.stringify(this.list);
          lists = JSON.parse(lists);
          this.lists = lists;
          console.log(lists);
        });
        setTimeout(() => {
          this.brandChange();
        }, 200);
        this.busUidChange();
        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
      // setTimeout(() => {
      //   this.getJisuan();
      //   this.getType();
      //   this.busUid = this.allData.busUid;
      //   this.channelUid = this.allData.channelUid;
      //   this.calcType = this.allData.calcType;
      //   this.busUidChange();
      // }, 200);
    }
    // 判断是否是查看
    if (this.$route.query.type == 2) this.type = true;
    else this.type = false;
    // 判断是否是修改
    // if(this.$route.query.setData&&this.$route.query.setData=='0002'){
    //   this.status = true
    // }else{
    //   this.status = false
    // }

    // 如果是从上一步回来的话
    if (this.$route.query.backOf && this.$route.query.backOf == "001") {
      console.log(this.$store.state.powerInterestData);
      this.getType();
      let data = this.$store.state.powerInterestData;
      this.busUid = data.busUid;
      this.busUidChange();
      setTimeout(() => {
        this.brandChange();
      }, 200);

      this.getJisuan();
      this.channelUid = data.channelUid;
      this.calcType = data.calcType;
      this.data = data.rgtOfficeBusCfgList;
      // console.log(this.)
    }
  },
  methods: {
    // 调用规则的回显
    async disPlays() {
      let oemUid = localStorage.getItem("uid");
      await axios
        .post("/api/business/getBusRuleCostForRgt", {
          channelUid: this.channelUid,
          oemUid: oemUid,
        })
        .then((res) => {
          console.log("配置成本回显");
          console.log(res);
          // 取出权益所需值(分润规则)
          for (let i = 0; i < res.data.data.busRuleCostCfgList.length; i++) {
            res.data.data.busRuleCostCfgList[i].rgtOfficeRuleCostList =
              res.data.data.busRuleCostCfgList[i].busRuleValList;
          }
          console.log("配置成本回显");
          console.log(res);
          let val = res.data.data.busRuleCostCfgList;
          console.log(val);
          this.list = val;
          let lists = JSON.stringify(val);
          this.lists = JSON.parse(lists);
          if (this.$route.query.status == "001") {
            this.data[0].rgtOfficeCostCfgListMapList[0].list = val;
            this.calcType = res.data.data.calcType;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    runChange(num1, num2, num3) {
      // for(let i=0; i<this.lists.length; i++){
      //   console.log(this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3])
      //   if(this.lists[i].costUid==this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3].costUid){
      //     if(this.lists[i].costValue<this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3].costValue){
      //       alert("不能大于")
      //     }
      //   }
      // }
      return
      if (
        this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3].costValue >
        this.lists[num3].costValue
      ) {
        this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3].costValue =
          "";
        layer.open({
          content: "分润金额已超过成本",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      for(let i=0; i<val.list.length; i++){
        if(val.list[i].costValue>this.list[i].costValue){
          alert("大于了")
        }
      }
    },

    // 业务品牌发生变化
    brandChange() {
      // 获取一下规则
      // 判断是创建的时候调用规则值
      if (this.$route.query.status == "001") {
        this.disPlays();
        // alert("创建")
      }
      if (this.$route.query.status != "001") {
        this.getProfitType();
        // alert("修改")
      }

      this.getUpgradeRule();
      // 结算方式
      this.getJisuan();

      return;

      // alert("业务品牌发生了变化")
      // 分润
      this.getProfitType();
      // 升级规则列表
      this.getUpgradeRule();
      // 结算方式
      this.getJisuan();
      return;
    },
    // 获取计算方式
    getJisuan() {
      // let oemUid = localStorage.getItem("uid")
      let oemUid;
      if (this.$route.query.callback) {
        oemUid = this.$route.query.crmUid;
      } else {
        oemUid = localStorage.getItem("uid");
      }
      axios
        .post("/api/sys/dict/queryDictList", {
          type: "calc_type",
          channelUid: this.channelUid,
          oemUid,
        })
        .then((res) => {
          console.log("计算方式");
          console.log(res);
          this.jisuanOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取品牌
    getBrand() {
      let oemUid;
      if (this.$route.query.status != "001") {
        oemUid = this.$route.query.crmUid;
      } else {
        oemUid = localStorage.getItem("uid");
      }
      axios
        .post("api/rgt/dict/getBusChannelDropDown", {
          busUid: this.busUid,
          oemUid,
        })
        .then((res) => {
          console.log("获取的品牌");
          console.log(res);
          this.brandOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取回显数据
    async getAllData() {
      await axios
        .post("/api/rgt/get", {
          oemUid: this.$route.query.crmUid,
          channelUid: this.$route.query.channelUid,
        })
        .then((res) => {
          console.log("这里是回显的数据");
          console.log(res);
          this.allData = res.data.data;
          this.data = res.data.data.rgtOfficeBusCfgList;
          this.num = this.data.length;
          for (let i = 0; i < this.data.length; i++) {
            for (
              let j = 0;
              j < this.data[i].rgtOfficeCostCfgListMapList[0].list.length;
              j++
            ) {
              for (
                let k = 0;
                k <
                this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                  .rgtOfficeRuleCostList.length;
                k++
              ) {
                for (
                  let x = 0;
                  x <
                  this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                    .rgtOfficeRuleCostList.length;
                  x++
                ) {
                  console.log("大记号");
                  let id = this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                    .rgtOfficeRuleCostList[k].ruleUid;
                  axios
                    .post("api/business/getBusRuleCfg", { ruleUid: id })
                    .then((res) => {
                      console.log("获取的回信的值");
                      console.log(res.data);
                      this.data[i].rgtOfficeCostCfgListMapList[0].list[
                        j
                      ].rgtOfficeRuleCostList[k].cfgValue = this.data[
                        i
                      ].rgtOfficeCostCfgListMapList[0].list[
                        j
                      ].rgtOfficeRuleCostList[k].cfgValue;

                      this.data[i].rgtOfficeCostCfgListMapList[0].list[
                        j
                      ].rgtOfficeRuleCostList[k].options = res.data.data;
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                  // this.data[i].rgtOfficeCostCfgListMapList[0].list[j].rgtOfficeRuleCostList[k].options = this.getFenData(this.data[i].rgtOfficeCostCfgListMapList[0].list[j].rgtOfficeRuleCostList[k].ruleCode)
                }
              }
            }
          }
          for (let i = 0; i < this.data.length; i++) {
            for (
              let j = 0;
              j < this.data[i].rgtOfficeRuleLevelList.length;
              j++
            ) {
              if (
                this.data[i].rgtOfficeRuleLevelList[j].cfgValues.length == 1
              ) {
                this.data[i].rgtOfficeRuleLevelList[j].isCfg = "0";
              } else {
                this.data[i].rgtOfficeRuleLevelList[j].isCfg = "1";
              }
            }
          }
          console.log("转换的数据");
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFenData(val) {
      let dataValue;
      axios
        .post("api/business/getBusRuleCfg", { ruleUid: val })
        .then((res) => {
          console.log("获取的回信的值");
          console.log(res.data);
          dataValue = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      return dataValue;
    },
    //
    bian(val, num1, num2) {
      console.log(val, num1, num2);
      console.log(this.upgradeOptions);
      for (let i = 0; i < this.upgradeOptions.length; i++) {
        if (this.upgradeOptions[i].uid == val) {
          this.data[num1].rgtOfficeRuleLevelList[
            num2
          ].isCfg = this.upgradeOptions[i].isCfg;
          break;
        }
      }
    },
    // 获取业务类型
    getType() {
      let oemUid;
      if (this.$route.query.status != "001") {
        oemUid = this.$route.query.crmUid;
      } else {
        oemUid = localStorage.getItem("uid");
      }

      // let oemUid = localStorage.getItem("uid")
      axios
        .post("/api/rgt/dict/getBusInfoDropDown", { status: 0, oemUid })
        .then((res) => {
          console.log("获取出来的业务类型");
          console.log(res);
          this.businessOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 业务类型发生变化的时候
    busUidChange() {
      // 分润规则列表

      // 获取品牌列表
      this.getBrand();
    },
    // 获取分润类型
    getProfitType() {
      let oemUid = localStorage.getItem("uid");
      axios
        .post("api/rgt/dict/getBusRuleList", {
          channelUid: this.channelUid,
          busUid: this.busUid,
          oemUid,
          costFlag: 0,
        })
        .then((res) => {
          console.log("分润类型");
          console.log(res);
          this.poliOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取升级规则
    getUpgradeRule() {
      axios
        .post("api/business/getBusRule", {
          channelUid: this.channelUid,
          costFlag: 1,
        })
        .then((res) => {
          console.log("分润类型");
          console.log(res);
          this.upgradeOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 返回
    backVipList() {
      this.$router.push({
        name: "vipList",
      });
    },
    next() {
      console.log(JSON.stringify(this.data));
    },
    addFen(num1, num2, num3, num4) {
      console.log(num1, num2, num3, num4);
      let val = this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
        .rgtOfficeRuleCostList;

      let obj = { ruleCode: "", cfgValue: "", options: [] };
      val.push(obj);
    },
    // 删除
    delFen(num1, num2, num3, num4) {
      this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
        num3
      ].rgtOfficeRuleCostList.splice(num4, 1);
    },
    addFen1(num1, num2, num3) {
      console.log(num1, num2, num3);
      let val = this.data[num1].rgtOfficeCostCfgListMapList[num2].list;

      let obj = {
        costValue: "", //分润规则后面的数字
        rgtOfficeRuleCostList: [
          {
            ruleCode: "", //卡等级
            cfgValue: "",
            options: [],
          },
        ],
      };
      val.push(obj);
    },
    // 删除规则
    delFen1(num1, num2, num3) {
      this.data[num1].rgtOfficeCostCfgListMapList[num2].list.splice(num3, 1);
    },
    // 添加权益等级
    addQuanyi() {
      console.log(this.list);
      let list = JSON.stringify(this.list);
      list = JSON.parse(list);
      for (let i = 0; i < list.length; i++) {
        list[i].costValue = "";
      }
      console.log(list);

      this.num = this.num + 1;
      let obj = {
        level: this.num,
        name: "", //等级名称
        openAmt: "", //开通金额
        buyRgtProf: "", //推荐奖励
        // 分润规则
        rgtOfficeCostCfgListMapList: [
          // 规则 和规则值  和奖励金额
          {
            list: list,
          },
        ],
        //   升级规则
        rgtOfficeRuleLevelList: [
          {
            ruleCode: "",
            cfgValue: "",
            ruleUid: "",
            cfgValues: [],
            one: "",
            two: "",
            isCfg: "", //控制一个框还是两个框
          },
        ],
      };
      this.data.push(obj);
    },
    delQuanyi(num) {
      this.data.splice(num, 1);
    },
    // 添加升级规则
    addShengji(num1, num2) {
      let obj = {
        ruleCode: "",
        ruleUid: "",
        cfgValue: "",
        cfgValues: [],
        one: "",
        two: "",
        isCfg: "", //控制一个框还是两个框
      };
      // alert(JSON.stringify(this.data[num1].rgtOfficeRuleLevelList))
      this.data[num1].rgtOfficeRuleLevelList.push(obj);
    },
    delShengji(num1, num2) {
      this.data[num1].rgtOfficeRuleLevelList.splice(num2, 1);
    },

    change1(val, num1, num2, num3, num4) {
      // console.log(
      //   this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //     .rgtOfficeRuleCostList
      // );
      // if (
      //   num4 <
      //   this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //     .rgtOfficeRuleCostList.length -
      //     1
      // ) {
      //   this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //     num3
      //   ].rgtOfficeRuleCostList[num4].ruleUid = "";
      //   for (
      //     var s = 0;
      //     s <
      //     this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //       .rgtOfficeRuleCostList.length;
      //     s++
      //   ) {
      //     if (
      //       val ==
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //         .rgtOfficeRuleCostList[s].ruleUid
      //     ) {
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //         num3
      //       ].rgtOfficeRuleCostList[num4].ruleUid = "";
      //       layer.open({
      //         content: "已存在",
      //         skin: "msg",
      //         time: 1, //1秒后自动关闭
      //       });
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //         num3
      //       ].rgtOfficeRuleCostList[num4].cfgValue = "";
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //         num3
      //       ].rgtOfficeRuleCostList[num4].options = [];
      //       return false;
      //     } else {
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //         num3
      //       ].rgtOfficeRuleCostList[num4].ruleUid = val;
      //     }
      //   }
      // } else {
      //   for (
      //     var i = 0;
      //     i <
      //     this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //       .rgtOfficeRuleCostList.length -
      //       1;
      //     i++
      //   ) {
      //     if (
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[num3]
      //         .rgtOfficeRuleCostList[i].ruleUid == val
      //     ) {
      //       this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
      //         num3
      //       ].rgtOfficeRuleCostList[num4].ruleUid = "";
      //       layer.open({
      //         content: "该分润规则已存在",
      //         skin: "msg",
      //         time: 1, //1秒后自动关闭
      //       });
      //     }
      //   }
      // }
      axios
        .post("api/rgt/dict/getBusRuleCfgList", {
          ruleUid: val,
          busUid: this.busUid,
        })
        .then((res) => {
          this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
            num3
          ].rgtOfficeRuleCostList[num4].cfgValue = "";
          this.data[num1].rgtOfficeCostCfgListMapList[num2].list[
            num3
          ].rgtOfficeRuleCostList[num4].options = res.data.data;
          this.$forceUpdate();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下一步
    nextStep() {
      console.log(JSON.stringify(this.data));
      let oemUid;
      if (this.$route.query.callback) {
        oemUid = this.$route.query.crmUid;
      } else {
        oemUid = localStorage.getItem("uid");
      }
      let channelUid = this.channelUid; //品牌id
      let calcType = this.calcType; //计算方式
      let tempUid = this.allData.tempUid;
      // axios
      //   .post("/api/rgt/edit", {
      //     oemUid,
      //     channelUid,
      //     calcType,
      //     rgtOfficeBusCfgList: this.data,
      //   })
      //   .then((res) => {
      //     // alert(res.data.code)
      //     if (res.data.code == "0000") {
      //       layer.open({
      //         content: res.data.msg,
      //         skin: "msg",
      //         time: 1, //1秒后自动关闭
      //       });
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //     layer.open({
      //       content: res.data.msg,
      //       skin: "msg",
      //       time: 1, //1秒后自动关闭
      //     });
      //   });
      // 判断里面的值是否为空
      outer: for (let i = 0; i < this.data.length; i++) {
        if (
          this.data[i].level != "" &&
          this.data[i].name != "" &&
          this.data[i].openAmt != "" &&
          this.data[i].buyRgtProf != ""
        ) {
          for (let z = 0; z < this.data[i].rgtOfficeRuleLevelList.length; z++) {
            if (this.data[i].rgtOfficeRuleLevelList[z].ruleUid != "") {
              for (
                let h = 0;
                h < this.data[i].rgtOfficeRuleLevelList[z].cfgValues.length;
                h++
              ) {
                if (this.data[i].rgtOfficeRuleLevelList[z].cfgValues[h] == "") {
                  this.submitBool = false;
                  break outer;
                }
              }
              for (
                let j = 0;
                j < this.data[i].rgtOfficeCostCfgListMapList[0].list.length;
                j++
              ) {
                if (
                  this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                    .costValue != ""
                ) {
                  for (
                    let k = 0;
                    k <
                    this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                      .rgtOfficeRuleCostList.length;
                    k++
                  ) {
                    if (
                      this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                        .rgtOfficeRuleCostList[k].ruleUid != "" &&
                      this.data[i].rgtOfficeCostCfgListMapList[0].list[j]
                        .rgtOfficeRuleCostList[k].cfgValue != ""
                    ) {
                      this.submitBool = true;
                    } else {
                      // alert("存在空")
                      this.submitBool = false;
                      break outer;
                    }
                  }
                } else {
                  // alert("存在空")
                  this.submitBool = false;
                  break outer;
                }
              }
            } else {
              this.submitBool = false;
              break outer;
            }
          }
        } else {
          // alert("存在空")
          this.submitBool = false;
          break outer;
        }
      }

      // 把数组存储到vuex
      if (this.submitBool) {
        let bigData = {
          tempUid,
          oemUid,
          busUid: this.busUid,
          channelUid,
          calcType,
          rgtOfficeBusCfgList: this.data,
        };
        let queryData = this.$route.query;
        sessionStorage.setItem("queryData", JSON.stringify(queryData));
        console.log(bigData);
        this.$store.commit("setPowerInterestData", bigData);
        this.$router.push({
          name: "setInterests",
        });
      } else {
        layer.open({
          content: "填写数据不能为空",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }
    },
  },
};
</script>

<style scoped>
.big1 {
  display: flex;
  margin-bottom: 20px;
}
.cur {
  cursor: pointer;
}
/deep/ .big1 .el-select {
  width: 120px !important;
}
/deep/ .big1 .el-select .el-input {
  width: 100%;
}
/deep/ .big1 .el-select .el-input .el-input__inner {
  width: 100%;
}
/deep/ .big1 .el-input {
  width: 120px;
}
/deep/ .big1 .el-input .el-input__inner {
  width: 100%;
}
/deep/ .moneyBox .el-input {
  width: 100px !important;
}
/deep/ .moneyBox .el-input .el-input__inner {
  width: 100%;
}
.borBot {
  height: 50px;
  align-items: center;
}
.rgtOfficeRuleLevelList {
  background-color: #f9fafc;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.headTitle {
  display: flex;
  height: 50px;
  align-items: center;
}
.flex {
  display: flex;
  align-items: center;
}
.big1:first-of-type {
  background: red !important;
}
.infoTitle {
  font-size: 18px;
  color: #303133;
  margin: 30px 0;
}
.infoCont {
  display: flex;
  height: 60px;
  align-items: center;
  background-color: #f9fafc;
}
.infoList {
  display: flex;
  align-items: center;
  margin-right: 80px;
}
.infoListTitle {
  font-size: 14px;
  margin-right: 10px;
}
.wrapBox {
  margin: 0 auto;
  width: 98%;
  min-width: 1780px;
}
.info {
  margin-bottom: 50px;
}
.addPic {
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #409eff;
  box-sizing: border-box;
  line-height: 20px;
  color: #409eff;
  margin-left: 10px;
  margin-right: 10px;
}
.backgroundBlock {
  background-color: #f9fafc;
  margin-right: 10px;
}
.lastBox div:last-of-type {
  margin-bottom: 0 !important;
}
/* 单色 */
.single {
  background-color: #f9fafc !important;
}
/* 双色 */
.double {
  background-color: #fcfaf9 !important;
}
.btnGroup {
  display: flex;
  justify-content: center;
}
.content {
  padding-left: 20px;
}
/deep/ .money {
  width: 100px !important;
}
.fenrun {
  display: flex;
}
</style>